<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>上课~点下名!</title>
		<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
		<script src="https://cdn.bootcss.com/xlsx/0.11.5/xlsx.core.min.js"></script>
		<link rel="stylesheet" type="text/css" href="../roster/css/index.css">
	</head>
	<body>
		<div class="index_containt">
			<div id="data_input">
				<input type="button" id="enteringData" name="fileButton" value="录入数据"
					onclick="$('#excel-file').click();" />
				<input style="display: none;" type="file" id="excel-file">
				<input type="button" id="downTemplate" onclick="downloadTemplate()" value="下载模板" />
			</div>
			<div id="show_info">
				<div id="student_name" style="color: aqua;">
					<h1 id="student_name_value">--/--</h1>
				</div>
				<div id="btn_container">
					<button id="start" disabled="true">开始随机</button>
					<button id="end">停止</button>
				</div>
				<h4 id="student_number">共 <span id='student_number_value'>0</span> 位同学</h4>
			</div>
		</div>
	</body>
</html>
<script>
	var time;
	var studentData = [];
	//给input标签绑定change事件，一上传选中的.xls文件就会触发该函数
	$('#excel-file').change(function(e) {
		var files = e.target.files;
		// console.log(files);
		//判断文件格式
		var fileName = files[0].name;
		// console.log(fileName);
		var suffix = fileName.split(".")[1];
		// console.log(suffix);
		if (suffix != 'xlsx' && suffix != 'xls' && suffix != 'xltx') {
			alert("抱歉~请放入正确的文件!");
			return;
		}
		var fileReader = new FileReader();
		fileReader.onload = function(ev) {
			try {
				var data = ev.target.result
				var workbook = XLSX.read(data, {
					type: 'binary'
				})
				var persons = []; 
			} catch (e) {
				console.log('文件类型不正确');
				return;
			}
			// 表格的表格范围，可用于判断表头是否数量是否正确
			var fromTo = '';
			var studentNumbers = 0;
			// 遍历每张表读取
			for (var sheet in workbook.Sheets) {
				if (workbook.Sheets.hasOwnProperty(sheet)) {
					fromTo = workbook.Sheets[sheet]['!ref'];
					console.log(fromTo);
					persons = persons.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
					studentNumbers = persons.length;
					//检测数量
					if (studentNumbers <= 0) {
						alert("学生数量必须大于等于0!");
						return;
					}
					document.getElementById("student_number_value").innerText = studentNumbers;
					//检测列数
					console.log(persons.length);
					$('#start').attr("disabled", false);
					break; // 如果只取第一张表，就取消注释这行
				}
			}
			studentData = persons;
			$("#area").val(JSON.stringify(persons));
		};
		fileReader.readAsBinaryString(files[0]);
	});
	$('#start').click(function() {
		var studentNumber = document.getElementById("student_number_value").innerText;
		time = window.setInterval(function() {
			var index = getRandom(1, studentNumber);
			var name = studentData[index].姓名;
			if (name.indexOf("!") === -1) {
				document.getElementById("student_name_value").innerHTML = name;
			}
		}, 50)
	});
	//结束
	$("#end").click(function() {
		window.clearInterval(time);
	})
	//随机数
	function getRandom(min, max) {
		return Math.floor(Math.random() * (max - min)) + min;
	}
	//下载模板
	function downloadTemplate() {
		var a = document.createElement("a"); //创建一个<a></a>标签
		a.href = "/roster/static/花名册模板.xlsx"; // 给a标签的href属性值加上地址，注意，这里是绝对路径，不用加 点.
		a.download = "花名册模板.xlsx"; //设置下载文件文件名，这里加上.xlsx指定文件类型，pdf文件就指定.fpd即可
		a.style.display = "none"; // 障眼法藏起来a标签
		document.body.appendChild(a); // 将a标签追加到文档对象中
		a.click(); // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
		a.remove(); // 一次性的，用完就删除a标签
	}
</script>
